<!-- 企业信息查询 -->
<template>
  <div class="home-page-content">
    <h3>企业信息查询</h3>
    <Form :model="formData" ref="FormRef" class="form-reset">
      <Row :gutter="30">
        <Col span="6">
          <CardMain itemName="公司名称">
            <FormItem prop="companyName">
              <Input
                v-model="formData.companyName"
                clearable 
                placeholder="请输入公司名称"
              ></Input>
            </FormItem>
          </CardMain>
        </Col>
        <Col span="6">
          <CardMain itemName="服务地区">
            <FormItem prop="serviceAreaName">
              <Input
                v-model="formData.serviceAreaName"
                clearable 
                placeholder="请输入服务地区"
              ></Input>
            </FormItem>
          </CardMain>
        </Col>
        <Col span="6">
          <CardMain itemName="产业标记">
            <FormItem prop="serviceTypeName">
              <Input
                v-model="formData.serviceTypeName"
                clearable 
                placeholder="请输入产业标记"
              ></Input>
            </FormItem>
          </CardMain>
        </Col>
        <Col span="12">
          <CardMain itemName="组织范围">
            <FormItem prop="parentName">
              <CompanySelect
                :companyId.sync="formData.parentId"
                :companyChangeId="formData.parentId"
                isMargin
              />
              <Input
                v-model="formData.parentName"
                clearable 
                placeholder="输入组织范围"
              ></Input>
            </FormItem>
          </CardMain>
        </Col>
        <Col span="12">
          <div class="action-search-btn">
            <Button type="primary" @click="queryList()">查询</Button>
            <Button type="primary" @click="formReset()">重置</Button>
          </div>
        </Col>
      </Row>
    </Form>
    <Row class="main-box">
      <Col span="24">
        <Table :columns="columns" :data="listData">
          <template slot-scope="{ row }" slot="serviceArea">
            {{ serviceAreaFn(row.serviceArea) }}
          </template>
          <template slot-scope="{ row }" slot="serviceType">
            {{ serviceTypeFn(row.serviceType) }}
          </template>
          <template slot-scope="{ row, index }" slot="action">
            <BtnText @BtnClick="viewDetail(row)"> 查看详情 </BtnText>
          </template>
        </Table>
      </Col>
    </Row>
    <PageAtion
      v-if="total"
      :total="total"
      :size.sync="formData.size"
      :page.sync="formData.page"
      @pageSizeChange="pageSizeChange"
    />
  </div>
</template>

<script type="text/javascript">
import {
  GetCompanyPage, //查询企业信息列表
} from "@/api/enterpriseInforManage.js";

import { returnStr } from "@/libs/util.js";

export default {
  name: "enterpriseInforInquiry",
  components: {},
  data() {
    return {
      formData: {
        companyName: "",
        serviceAreaName: "",
        serviceTypeName: "",
        parentId: "",
        parentName: "",
        page: 1,
        size: 10,
      },
      columns: [
        {
          title: "公司名称",
          key: "companyName",
        },
        {
          title: "上级组织",
          key: "parentName",
        },
        {
          title: "注册地址",
          key: "companyAddress",
        },
        {
          title: "服务地区",
          slot: "serviceArea",
        },
        {
          title: "产业标记",
          slot: "serviceType",
        },
        {
          title: "操作",
          slot: "action",
          width: 150,
          align: "center",
        },
      ],
      listData: [],
      total: 10,
    };
  },
  methods: {
    pageSizeChange() {
      this.getCompanyPageData();
    },
    queryList() {
      this.formData.page = 1;
      this.getCompanyPageData();
    },
    formReset() {
      this.formData.page = 1;
      this.formData.size = 10;
      this.formData.parentId = "";
      this.$refs.FormRef.resetFields();
      this.getCompanyPageData();
    },
    async getCompanyPageData() {
      let { data, total } = await GetCompanyPage(this.formData);
      this.listData = data;
      this.total = total;
    },
    // 查看详情
    viewDetail(row) {
      this.$router.push({
        path: "/enterpriseInforDetail",
        query: {
          companyId: row.companyId,
        },
      });
    },
    serviceAreaFn(data) {
      return returnStr(data, "provinceName", "cityName");
    },
    serviceTypeFn(data) {
      return returnStr(data, "serviceTypeName");
    },
  },
  mounted() {
    this.getCompanyPageData();
  },
};
</script>

<style lang="less" scoped>
.home-index-content {
  h3 {
    font-size: 18px;
  }
}

.company-select {
  margin-right: 10px;
}
</style>
